import { useLayoutEffect } from "react";

export function useFillSpace({
	tablecardref,
	fillSpace,
	tableData
}: {
	tablecardref: any;
	fillSpace: boolean | number;
	tableData: any[];
}) {
	useLayoutEffect(() => {
		if (fillSpace === void 0) return;
		if (!tablecardref.current) return;
		const cardDom = tablecardref.current;
		const antdTableDom = cardDom?.querySelector("div.hov-table");
		if (!antdTableDom) return;

		if (fillSpace !== true && typeof fillSpace !== "number") {
			antdTableDom.style.height = `auto`;
			return;
		}

		let h;
		const fillHeight = fillSpace === true ? 1 : fillSpace + 1;
		const { bottom: antdTableBottom, height: antdTableHeight } = antdTableDom!.getBoundingClientRect();
		const { bottom: cardBottom } = cardDom!.getBoundingClientRect();
		const antdTableMarginBottom = window.innerHeight - antdTableBottom;

		if (antdTableMarginBottom <= 0) return;

		if (antdTableMarginBottom - fillHeight > 0) {
			h = antdTableMarginBottom + antdTableHeight - fillHeight - (cardBottom - antdTableBottom);
		} else {
			h = antdTableMarginBottom + antdTableHeight - (cardBottom - antdTableBottom);
		}

		antdTableDom!.style.height = `${Math.floor(h)}px`;
		antdTableDom!.style.overflow = "auto";
	}, [fillSpace, tableData?.length]);
}
